/** @file Switch.qml
@brief Switch object with label, info button and popup

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/

import QtQuick 1.0
import "Theme.js" as JObj
import "Math.js"as JMath

Item {
    id: horizontalswitch

    // Signal that gets fired when switch state has been toggled
    signal switched(bool falgstate)
    // Property indicating current state
    property bool switchedOn: objLoad.getFlag()

    function setSwitchStatus(status) {
        switchedOn = status;
    }

    width: objLoad.getWidth()
    height: objLoad.getHeight()
    anchors.left: parent.left

    // The switch toggle image
    BorderImage {
        id: toggleSwitch
        height: objLoad.getHeight(); smooth: true
        anchors.left: parent.left
        border { left: 10; top: 10; right: 10; bottom: 10 }
        source: switchedOn == true ? JObj.getSwitchOn(objLoad.getTheme()) :JObj.getSwitchOff(objLoad.getTheme());
        MouseArea {
            anchors.fill: toggleSwitch
            onClicked: { switchedOn = !switchedOn; horizontalswitch.switched(switchedOn); }
        }
    }

    onSwitchedOnChanged: {
        if (switchedOn)
            toggleSwitch.source = JObj.getSwitchOn(objLoad.getTheme());
        else
            toggleSwitch.source = JObj.getSwitchOff(objLoad.getTheme());
    }

    // The text label
    Text {
        id: label
        anchors.left: toggleSwitch.right
        anchors.leftMargin: objLoad.getFieldSpacing();
        color: JMath.sw_TxtColor; text: objLoad.getString();
        font.pointSize: objLoad.getFontSwitches();
    }
    // Info button
    BorderImage {
        id: button
        source: JObj.getInfoPopIco(objLoad.getTheme())
        border { left: 10; top: 10; right: 10; bottom: 10 }
        anchors.right: parent.right
        anchors.rightMargin: objLoad.getFieldSpacing()
        // object is forced to be square
        height: objLoad.getHeight(); width: objLoad.getHeight()
        clip: true
        // This object can be deactivated
        visible: objLoad.getInfoFlag()

        Rectangle { id: shade; anchors.fill: button; radius: 5; color: "black"; opacity: 0 }
        MouseArea { id: mouseArea; anchors.fill: parent; onClicked: { moreInfo.show(); } }
        states: State {
            name: "pressed"; when: mouseArea.pressed == true
            PropertyChanges { target: shade; opacity: .2 }
        }
    }
    // Pop more info in a small area on top of the caller object.
    Item {
        id: moreInfo
        opacity: showInfo;
        // Size of the message area is 75% less wide and three times height the
        // switch row size
        width: objLoad.getWidth() * 0.75; height: objLoad.getHeight() * 3
        anchors.right: button.left; anchors.rightMargin: -(button.width / 2)
        anchors.verticalCenter: button.verticalCenter
        property bool showInfo: false
        function show() { showInfo = true; }
        // When opacity changes the object appear fading
        Behavior on opacity { NumberAnimation { duration: 600; easing.type: Easing.InOutQuad } }
        // Clicking on the mousearea closes the info box.
        // Note the the clickable area is not all the message area but only the
        // surface of the parent object.
        MouseArea {
            enabled: moreInfo.showInfo;
            anchors.fill: moreInfo; onClicked: moreInfo.showInfo = false
        }
        // The background rectangel of the info area has the same
        // size of the entire object
        Rectangle {
            id: background; width: objLoad.getWidth() * 0.75; height: objLoad.getHeight() * 3
            color: JMath.sw_popBackColor; border.color: JMath.sw_popBorderColor
        }
        // The text message is anchored to the top left corner of the rectangle
        // with a top-left margin. The values are fixed because this object is part
        // of a compound element that should not be loaded independently.
        Text {
            id: popLabel
            width: objLoad.getWidth() * 0.70
            anchors.top: background.top; anchors.left: background.left
            anchors.topMargin: 5; anchors.leftMargin: 10
            text: objLoad.getMessage(); wrapMode: Text.WordWrap
            font.pointSize: objLoad.getFontSwitches();
            color: "darkgrey"
        }
    }
}
